import * as React from 'react';
import Image from '../../src/image';
import './assets/index.less';

export default function Base() {
  const [random, setRandom] = React.useState(Date.now());
  return (
    <div>
      <button
        type="button"
        onClick={() => {
          setRandom(Date.now());
        }}
      >
        Reload
      </button>
      <h1>Default placeholder</h1>
      <div>
        <Image
          // eslint-disable-next-line global-require
          src={`${require('./demo1.png')}?random=${random}`}
          width={400}
          placeholder
        />
      </div>
      <br />
      <h1>Custom placeholder</h1>
      <Image
        // eslint-disable-next-line global-require
        src={`${require('./demo1.png')}?random=${random + 1}`}
        width={400}
        placeholder={
          <Image
            width="100%"
            height="100%"
            preview={false}
            src=""
          />
        }
      />
    </div>
  );
}
